{layout name="layout/header" /}
<link href="root/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="root/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">

<link href="root/css/plugins/switchery/switchery.css" rel="stylesheet">
<script src="root/js/plugins/switchery/switchery.js"></script>
<div class="wrapper wrapper-content animated fadeInRight" id="app">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{$title}</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        <button type="button" class="btn btn-primary btn-outline refresh">刷新</button>
                        <!--<a type="button" class="btn btn-primary btn-outline" href="{:url('index')}">返回列表页</a>-->
                    </p>
                </div>
                <div class="ibox-content">
                    <form class="form-horizontal" id="form">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">行政区域名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="name" name="name">

                            </div>
                        </div>
                        <div class="form-group" v-if="show">
                            <label class="col-sm-2 control-label">父级行政区域名称</label>
                            <div class="col-sm-2">
                                <select class="form-control m-b" name="" v-model="province_id" @change="getArea(1)">
                                    <option value="0" >请选择省份</option>
                                    <option :value="i.id" v-for="i in province">{{i.name}}</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select class="form-control m-b" name="" v-model="city_id" @change="getArea(2)">
                                    <option value="0" >请选择市</option>
                                    <option :value="i.id" v-for="i in city">{{i.name}}</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select class="form-control m-b" name="" v-model="county_id" @change="getArea(3)">
                                    <option value="0" >请选择区/县/街道</option>
                                    <option :value="i.id" v-for="i in county">{{i.name}}</option>
                                </select>
                            </div>
                            <div class="col-sm-2">
                                <select class="form-control m-b" name="" v-model="town_id">
                                    <option value="0" >请选择乡/镇</option>
                                    <option :value="i.id" v-for="i in town">{{i.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" v-model="sort" name="sort">
                                <span class="help-block m-b-none">默认0按时间倒序排序，如果大于0，则按数字大小倒序置顶</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <a class="btn btn-primary" @click="submit" type="submit">保存内容</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- iCheck -->
<script src="root/js/plugins/iCheck/icheck.min.js"></script>
<script src="root/js/plugins/validate/jquery.validate.min.js"></script>
<script src="root/js/plugins/validate/messages_zh.min.js"></script>
<script src="root/js/plugins/fancybox/jquery.fancybox.js"></script>

<script>
    var data = {$data};
    var url = "{$url}";

    if (data == 1) {
        data = {
            id: 0,
            name:'',
            pid:0,
            level:0,
            sort:0,
            show:true,
        }
    }else {
        data.show = false;
    }
    data.province_id = 0;
    data.city_id = 0;
    data.county_id = 0;
    data.town_id = 0;
    data.province= [];
    data.city= [];
    data.county= [];
    data.town= [];
    //1
    new Vue({
        el: "#app",
        data: data,
        created:function(){
            this.getArea(0);
        },
        methods: {
            getArea:function(level){
                var area_id;
                var _this= this;
                if(level == 0){
                    area_id = 0;
                }else if(level == 1){
                    area_id = _this.province_id;
                }else if(level ==2){
                    area_id = _this.city_id;
                }else if (level == 3){
                    area_id = _this.county_id;
                }
                $.post("{:url('getArea')}",{pid:area_id},function (res) {
                    if(res.code){
                        if(level == 0){
                            _this.province = res.data;
                        }else if(level == 1){
                            _this.city = res.data;
                        }else if(level ==2){
                            _this.county = res.data;
                        }else if (level == 3){
                            _this.town = res.data;
                        }
                    }
                },'json')
            },
            submit:function () {
                var _this = this;
                $("#form").validate({
                    rules:{
                        name:{
                            required:true,
                        },
                        column_id:{
                            min:1,
                        },
                        color:{
                            required:true
                        },
                        sort:{
                            digits:true,
                        }
                    },
                    messages:{
                        column_id:{
                            min:'请选择一个栏目',
                        },
                        color:{
                            required:'请选择一个背景颜色',
                        },
                    }
                })
                if($("#form").valid()) {

                    $.post(url,data,function (res) {
                        layer.msg(res.msg);

                        if(res.code==1){
                            setTimeout(function () {
                                window.location.reload()
                            },1500)
                        }
                    },'json')
                }

            }
        },
        mounted: function () {
            checks();
            $('.fancybox').fancybox({
                openEffect: 'none',
                closeEffect: 'none'
            });
        }
    });
</script>

<script>
    $('input[name="display"]').on('ifChecked', function (event) {
        data.display = $(this).val()
    });

</script>
